<template>
  <div>
    <Top />
    <section class="bg-green-600 flex-col flex items-center justify-center" style="height: 10vh;text-align: center;">
      <div class="container mx-auto px-4">
        <div class="row">
          <div class="col-md-12 text-center">
            <h2 class="text-4xl font-bold text-white">{{expertData.name}}</h2>
          </div>
        </div>
      </div>
    </section>

    <div class="bg-white py-16">
      <div class="max-w-7xl mx-auto px-8">
        <!-- 专家详细信息 -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-12">
          <!-- 左侧：专家照片 -->
          <div class="lg:col-span-1">
            <img :src="expertData.image" :alt="expertData.name" class="w-full max-w-sm mx-auto rounded-lg object-cover">
          </div>
          
          <!-- 右侧：详细介绍 -->
          <div class="lg:col-span-2">
            <div class="text-gray-800 leading-relaxed space-y-4">
              <!-- 专家简介 -->
              <div v-if="expertData.biography && expertData.biography.length > 0">
                <h3 class="text-xl font-semibold mb-4">Profile</h3>
                <p v-for="paragraph in expertData.biography" :key="paragraph" class="text-justify text-base mb-4">
                  {{ paragraph }}
                </p>
              </div>
              
              <!-- 详细描述 (HTML格式) -->
              <div v-if="expertData.modelDescription" class="mt-6">
                <h3 class="text-xl font-semibold mb-4">Detailed Information</h3>
                <div class="prose max-w-none" v-html="expertData.modelDescription"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 模型图表部分 -->
        <div class="mt-16" v-if="expertData.modelImage">
          <div class="text-center mb-8">
            <img :src="expertData.modelImage" :alt="expertData.modelTitle" class="max-w-full h-auto mx-auto">
            <p class="text-gray-700 mt-6 font-medium text-center">{{ expertData.modelTitle }}</p>
          </div>
          <div class="text-gray-700 leading-relaxed" v-if="expertData.modelDescription">
            <p class="text-justify text-base">{{ expertData.modelDescription }}</p>
          </div>
        </div>
      </div>
    </div>
    <Bottom />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { expertApi } from '~/public/utils/api'

const route = useRoute()

// 页面元数据
definePageMeta({
  layout: false
})

// 专家数据
const expertData = ref({
  name: '',
  image: '',
  biography: [],
  modelImage: '',
  modelTitle: '',
  modelDescription: ''
})

// 获取专家详情
const fetchExpertDetail = async () => {
  try {
    const expertId = route.query.id || 1
    const result = await expertApi.getDetail(Number(expertId))
    
    if (result.data) {
      const expert = result.data
      expertData.value = {
        name: expert.expertName,
        image: expert.avatarUrl || '/images/1_1649131169635.png',
        biography: [expert.profile || 'Expert profile'],
        modelImage: '',
        modelTitle: '',
        modelDescription: expert.detailed || ''
      }
      console.log('Expert detail:', expert) // 调试用
    }
  } catch (error) {
    console.error('Failed to fetch expert detail:', error)
  }
}

onMounted(async () => {
  await fetchExpertDetail()
})
</script>